

<!-- 我的银行卡 -->
<template>
	<view class="container">
		<view class="card" v-for="(item, index) of list" :key="index" @click="gotoSelectBankCard(item)" 
			:style="item.bgColor">
			<view class="left">
				<image :src="imgSite+item.bankForm.logo"></image>
			</view>
			<view class="right">
				<view class="bankName">{{item.bankName}}</view>
				<view class="bankType">{{item.type == '0'?'储蓄卡':'信用卡'}}</view>
				<view class="cardNumber">{{item.numone}}<text>****</text><text>****</text><text>{{item.numtwo}}</text></view>
			</view>
		</view>
		<!-- 添加银行卡 -->
		<view @click="gotoAddBankCard()" class="addBankCard-Container">
			+ 添加银行卡
		</view>
	</view>
</template>
	
<script>
	import navHeader from '@/components/nav-header/nav-header';
	import {
		mapState,
		mapMutations
	} from 'vuex';
	export default {
		components: {
			navHeader
		},
		data() {
			return {
				icon:{ 
					return:'/static/images/common/return-white.png',
					top:'/static/images/common/header.png',
					msgCenterWhite:'/static/images/common/msg-center-white.png'
				},
				list:[],
				
				//选择银行卡标记
				selectFlag: false
			}
		},
		computed: {
			...mapState(['imgSite', 'windowTop'])
		},
		onLoad(options){
			this.selectFlag = options.selectFlag;
			console.log("options", options)
			if (options.title) {
				uni.setNavigationBarTitle({
				　　title: options.title
				})
			}
		},
		onShow() {
			let that = this;
			this.$api.globalUtil.requestAjax({
				url: '/bankApi/getCustomerBankListApi',
				method: 'POST',
				data: {
				},
				success: function(res) {
					console.log(res.data.response);
					for(let i of res.data.response){
						// console.log(i.cardNumber);
						i.numone = i.cardNumber[0] + i.cardNumber[1] + i.cardNumber[2] + i.cardNumber[3];
						i.numtwo = i.cardNumber[12] + i.cardNumber[13] + i.cardNumber[14] + i.cardNumber[15];
						i.bankForm.color = (i.bankForm.color || '').split(',');
						
						if(i.bankForm.color && i.bankForm.color.length >= 2) {
							i.bgColor = 'background-image: linear-gradient(to right,'+ i.bankForm.color[0] + ','+ i.bankForm.color[1] +');';
						}else {
							i.bgColor = '';
						}
					}
					that.list = res.data.response;
				}
			});
		},
		methods: {
			//goto添加银行卡
			gotoAddBankCard() {
				uni.navigateTo({
					url: 'addCard?type=add&data={}'
				});
			},
			
			//选择银行卡
			gotoSelectBankCard(item) {
				
				console.log(this.selectFlag);
				
				if(this.selectFlag) {
					uni.$emit("selectBankCard", item);
					uni.navigateBack({
					});
				}else {
					let data = JSON.stringify(item);
					uni.navigateTo({
						url: 'addCard?type=change&data='+data
					});
				}
			}
		}
	}
</script>
				
<style lang="scss">

	page{
		background: #F5F5F5;
		overflow-x: hidden;
	}
	
	// header部分
	.header-Container {
		position: relative;
		width: 100%;
		height: 176rpx;
		overflow: hidden;
		box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.08);
		background: rgba(255, 255, 255, 1);
		
		.header-bg {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background:rgba(255,255,255,1);
		}
	
		.leftBtns {
			display: flex;
			align-items: center;
			justify-content: flex-start;
			position: absolute;
			bottom: 0;
			width: 100%;
			height: 86rpx;
	
			.back {
				margin-left: 17rpx;
				width: 44rpx;
				height: 44rpx;
			}
		}
	
		.title {
			position: absolute;
			bottom: 0;
			width: 100%;
			height: 86rpx;
			line-height: 86rpx;
			text-align: center;
			font-size: 36rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: rgba(51, 51, 51, 1);
		}
	}
	
	.container {
		overflow-x: hidden;
	}
	
	
	// 添加银行卡
	.addBankCard-Container {
		margin: 0 auto;
		margin-top: 200rpx;
		width:690rpx;
		height:100rpx;
		line-height: 100rpx;
		background:rgba(255,255,255,1);
		border: 1upx solid #FCE0E0;
		box-shadow: 0px 5upx 10upx 0px rgba(192, 192, 192, 0.08);
		border-radius: 10upx;
		text-align: center;
		font-size:34rpx;
		font-family:PingFang;
		// font-weight:500;
		color: #FE5E49;
	}
	.card{
		width: 690rpx;
		height: 230rpx;
		margin: 26rpx auto 0 auto;
		border-radius: 10rpx;
		display: flex;
		
		.left{
			margin-left: 36rpx;
			width: 94rpx;
			display: flex;
			justify-content: start;
			
			image{
				width: 70rpx;
				height: 70rpx; 
				margin-top: 44rpx;
				border-radius: 50%;
			}
		}
		.right{
			width: 460rpx;
			color: white;
			
			.bankName{
				font-size: 30rpx;
				margin-top: 40rpx;
			}
			.bankType{
				font-size: 24rpx;
				// margin-top: 8rpx;	
			}
			.cardNumber{
				display: flex;
				justify-content: space-between;
				font-size: 40rpx;
				margin-top: 30rpx;
				line-height: 40rpx;
				
				text{
					line-height: 40rpx;
					margin-left: 37rpx;
				}
			}
		}
	}
</style>



